<template>
  <!-- 用户页面 -->
  <div>
    <el-row class="container">
      <el-col style="margin-right: 10px" class="content-left">
        <el-row class="handleBox">
          <el-col :span="18">
            <el-button @click="reassign()">确定</el-button>
            <el-button @click="close()">关闭</el-button>
          </el-col>
          <el-col :span="6">
            <div class="handleIconBox">
              <el-popover
                placement="left-start"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="search_porper">
                  <el-form
                    :model="searchForm"
                    ref="searchForm"
                    label-width="100px"
                    label-position="right"
                    size="mini"
                  >
                    <el-form-item label="流程编号：">
                      <el-input
                        v-model="searchForm.modelCode"
                        style="width: 150px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="流程名称：">
                      <el-input
                        v-model="searchForm.modelName"
                        style="width: 150px"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="流程状态：" prop="status">
                      <el-select
                        v-model="searchForm.status"
                        style="width: 150px"
                      >
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="注销" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <div style="text-align: center; padding: 10px">
                    <el-button type="primary" size="mini" @click="init()"
                      >查询</el-button
                    >
                    <el-button
                      size="mini"
                      @click="
                        (searchForm.modelCode = ''),
                          (searchForm.modelName = ''),
                          (searchForm.status = '')
                      "
                      >重置</el-button
                    >
                  </div>
                </div>
                <i
                  class="iconfont icon-sousuo"
                  title="搜索"
                  slot="reference"
                ></i>
              </el-popover>
              <el-popover
                placement="bottom"
                width="150"
                trigger="click"
                popper-class="icon_porper"
              >
                <div class="operation_checkbox">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox
                      v-for="item in textData"
                      :label="item.label"
                      :key="item.prop"
                      >{{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
                <i
                  class="iconfont icon-liebiaoshezhi"
                  title="列表设置"
                  slot="reference"
                ></i>
              </el-popover>
            </div>
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @row-click="authorizeFor"
          max-height="250px;"
        >
          <el-table-column
            width="55"
            type="selection"
            
          ></el-table-column>
          <el-table-column
            prop="processDefCode"
            label="流程编号"
            v-if="columnState[0]"
          >
          </el-table-column>
          <el-table-column
            prop="processDefName"
            label="流程名称"
            v-if="columnState[1]"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态 "
            v-if="columnState[2]"
            :filter-method="(val, row) => row.status === val"
            :filters="[
              { text: '已激活', value: '1' },
              { text: '已锁定', value: '0' },
            ]"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">
                <i class="startState"></i><span>已激活</span>
              </div>
              <div v-if="scope.row.status == 0">
                <i class="unStartState"></i
                ><span style="color: red">已锁定</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @refresh="init();"
          :current-page="searchForm.page"
          :page-size="searchForm.size"
          :total="total"
        ></pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { workflow } from "@/api/index";
import moment from "moment";
export default {
  data() {
    return {
      total: 0,
      addOrEdit: false, // 新增/编辑/查看弹窗
      searchForm: {
        modelCode: "",
        modelName: "",
        status: "",
        page: 1,
        size: 15,
      },
      saveForm: {},

      checkList: [],
      // 列隐藏
      textData: [
        { label: "流程编号" },
        { label: "流程名称" },
        { label: "状态" }
      ],
      // 获取table的数据
      tableData: [],
    };
  },
  components: {},
  created() {
    this.checkListInit();
  },
  computed: {
    columnState() {
      let arr = [],
        arr1 = this.textData,
        arr2 = this.checkList;
      for (let i = 0; i < arr1.length; i++) {
        let flg = false;
        for (let j = 0; j < arr2.length; j++) {
          if (arr1[i].label === arr2[j]) {
            flg = true;
          }
        }
        arr.push(flg);
      }
      return arr;
    },
  },
  mounted() {},
  watch: {},
  methods: {
    checkListInit() {
      this.checkList = this.textData.map((v) => {
        return v.label;
      });
    },
    init() {
      let data = this.searchForm;
      console.log(data);
      workflow
        .queryDefForAgent(data)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.datas;
          }
        })
        .catch((err) => {});
    },
    reassign() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择数据");
      }
      this.$emit("processed", selection);
    },
    close() {
      this.$emit("processClose", "");
    },
    authorizeFor(row) {
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSizeChange(val) {
      this.searchForm.size = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 20px;
  min-height: 380px;
  .tableTop {
    margin-bottom: 20px;
  }
  h3 {
    line-height: 30px;
  }
}
</style>